<template>
  <van-nav-bar fixed placeholder :title="$t('message.matchSetting')" />
  <van-row>
    <van-col span="16">
      <h2>{{ $t('message.matchPlayer') }}</h2>
    </van-col>
    <van-col span="8">
      <van-switch id="three-person-switch" v-model="currentMatchStore.threePerson" inactive-color="#faab0c">
        <template #node>
          <div>
            {{currentMatchStore.threePerson ? $t('message.three') : $t('message.four')}}
          </div>
        </template>
      </van-switch>
    </van-col>
  </van-row>
  <van-cell-group inset>
    <template v-for="(item, index) in currentMatchStore.playerList">
      <van-field
      v-if="!(currentMatchStore.threePerson && index == 3)"
      v-model="item.name"
      is-link
      readonly
      :label="getPositionName(item.position)"
      :placeholder="$t('message.player')"
      @click="currentPickingPlayer[0] = playerStore.playerList.includes(item.name)? item.name: playerStore.playerList[0], showPicker = true, currentPickingPosition = item.position"
      />
    </template>
    <van-row>
    <van-col span="8">
      <van-button type="primary" size="large" :color="currentMatchStore.matchLength=='east'? '#07c160' : '#c8c9cc'" @click="currentMatchStore.matchLength = 'east'">{{ $t('message.tong') }}</van-button>
    </van-col>
    <van-col span="8">
      <van-button type="primary" size="large" :color="currentMatchStore.matchLength=='half'? '#faab0c' : '#c8c9cc'" @click="currentMatchStore.matchLength = 'half'">{{ $t('message.half') }}</van-button>
    </van-col>
    <van-col span="8">
      <van-button type="primary" size="large" :color="currentMatchStore.matchLength=='full'? '#ee0a24' : '#c8c9cc'" @click="currentMatchStore.matchLength = 'full'">{{ $t('message.full') }}</van-button>
    </van-col>
    </van-row>
  </van-cell-group>

  <van-row>
    <van-col span="13">
      <div id="switch-button">
        <van-button round type="primary" icon="friends" @click="onSwitchSeat">{{ $t('message.randomSeat') }}</van-button>
      </div>
    </van-col>
    <van-col span="11">
      <div id="start-button">
        <van-button round type="success" icon="play" @click="onStartMatch">{{ $t('message.start') }}</van-button>
      </div>
    </van-col>
  </van-row>
  
  <h2>{{$t('message.matchSetting')}}</h2>
  <van-cell-group inset>
    <van-collapse v-model="commonStore.activeMenuNames">
      <van-collapse-item :title="$t('message.scoreSetting')">
        <van-field v-model="currentMatchStore.scoreRule.initialScore" type="digit" :label="$t('message.initialScore')" />
        <van-field v-model="currentMatchStore.scoreRule.targetScore" type="digit" :label="$t('message.targetScore')" />
        <van-field
          v-model="currentMatchStore.scoreRule.uma"
          is-link
          readonly
          :label="$t('message.uma')"
          @click="showUmaPicker = true"
        />
        <van-cell :title="$t('message.oka')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.scoreRule.oka" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.bankruptcy')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.scoreRule.bankruptcy" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.enteringWest')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.scoreRule.enteringWest" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.bonusReward')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.scoreRule.bonusReward" />
          </template>
        </van-cell>
        <van-field v-if="currentMatchStore.scoreRule.bonusReward" v-model="currentMatchStore.scoreRule.bonusRewardScore" type="digit" :label="$t('message.bonusRewardScore')" />
        <van-cell :title="$t('message.setScoreSeparate')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.scoreRule.setScoreSeparate" />
          </template>
        </van-cell>
        <van-cell-group v-if="currentMatchStore.scoreRule.setScoreSeparate">
          <template v-for="(item, index) in currentMatchStore.playerList">
            <van-field
            v-if="!(currentMatchStore.threePerson && index == 3)"
            type="digit"
            :label = "item.name"
            v-model="item.score"
            />
          </template>
        </van-cell-group>
      </van-collapse-item>
      <van-collapse-item :title="$t('message.ruleSetting')">
        <van-cell :title="$t('message.roundUpMangan')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.roundUpMangan" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.renchan')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.renchan" />
          </template>
        </van-cell>
        <van-cell v-if="currentMatchStore.matchRule.renchan" :title="$t('message.readyRenchan')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.readyRenchan" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.drawMangan')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.drawMangan" />
          </template>
        </van-cell>
        <van-cell v-if="currentMatchStore.matchRule.drawMangan" :title="$t('message.drawManganAsWin')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.drawManganAsWin" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.winAndStop')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.winAndStop" />
          </template>
        </van-cell>
        <van-cell v-if="currentMatchStore.matchRule.winAndStop" :title="$t('message.readyAndStop')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.readyAndStop" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.topTakeDeposit')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.topTakeDeposit" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.sameScorePlacement')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.sameScorePlacement" />
          </template>
        </van-cell>
        <van-cell :title="$t('message.noLimit')">
          <template #right-icon>
            <van-switch v-model="currentMatchStore.matchRule.noLimit" />
          </template>
        </van-cell>
      </van-collapse-item>
    </van-collapse>

  </van-cell-group>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :modelValue="currentPickingPlayer"
      :title="getPositionName(currentPickingPosition)"
      :columns="playerStore.playerList.map((item)=> {return {text:item, value:item}})"
      @cancel="showPicker = false"
      @confirm="onPickConfirm"
    />
  </van-popup>
  <van-popup v-model:show="showUmaPicker" round position="bottom">
    <van-picker
      :title="$t('message.uma')"
      :modelValue="[currentMatchStore.scoreRule.uma]"
      :columns="Object.keys(Uma).map((item)=> {return {text:Uma[item], value:Uma[item]}})"
      @cancel="showUmaPicker = false"
      @confirm="onUmaPickConfirm"
    />
  </van-popup>
</template>

<script setup lang="ts">
  import { ref , onMounted} from 'vue'
  import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
  import { useCommonStore } from '../stores/common'
  import { useCurrentMatchStore, Position, Uma} from '../stores/currentMatch'
  import { usePlayerStore } from '../stores/players'
  import { useI18n } from 'vue-i18n'
  const {t} = useI18n();
  const commonStore = useCommonStore();
  const currentMatchStore = useCurrentMatchStore();
  const playerStore = usePlayerStore();
  const showPicker = ref(false);
  const showUmaPicker = ref(false);
  const currentPickingPosition = ref(0);
  const currentPickingPlayer = ref([""]);
  const setScoreSeprate = ref(false);

  onBeforeRouteLeave((to, from) =>{
    commonStore.cacheScroll["HomeView"] = document.scrollingElement.scrollTop;
    return true;
  })

  onMounted(() => {
    if("HomeView" in commonStore.cacheScroll)
    {
      document.scrollingElement.scrollTop = commonStore.cacheScroll["HomeView"] - 46;
    }
  })

  function getPositionName(positionEnum:Position) : string
  {
    switch(positionEnum)
    {
      case Position.east:
        return t('position.east');
      case Position.south:
        return t('position.south');
      case Position.west:
        return t('position.west');
      case Position.north:
        return t('position.north');

    }
  };
  function onPickConfirm ({ selectedOptions }){
      showPicker.value = false;
      for(let i in currentMatchStore.playerList)
      {
        if(currentMatchStore.playerList[i].name == selectedOptions[0].value)
        {
          currentMatchStore.playerList[i].name = currentMatchStore.playerList[currentPickingPosition.value].name
        }
      }
      currentMatchStore.playerList[currentPickingPosition.value].name = selectedOptions[0].value;
  };
  function onSwitchSeat(){
    let nameList = currentMatchStore.playerList.map((item)=> {return item.name});
    shuffle(nameList);
    for(let i in currentMatchStore.playerList)
    {
      currentMatchStore.playerList[i].name = nameList[i];
    }
  }
  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }
  function onUmaPickConfirm({selectedOptions})
  {
    showUmaPicker.value = false;
    currentMatchStore.scoreRule.uma = selectedOptions[0].value;
  }

  function onStartMatch(){

  }
</script>

<style scoped>
h2 {
  color: var(--van-text-color-1);
  margin: 16px 32px 16px 32px;
}
#switch-button {
  margin: 16px 32px 16px 32px;
}
#start-button {
  margin: 16px 32px 16px 32px;
  float: right;
}
#three-person-switch {
  float: right;
  margin: 16px 32px 16px 32px;
  div{
    font-size: 16px;
    line-height: 26px;
    font-weight: bold;
    text-align: center;
  }
}
</style>